<template>
    <div class="body">
        <el-menu
        :default-active="activeIndex"
        background-color="#F5F6FA"
        active-text-color="#1795FF"
        text-color="#333333 "
        class="el-menu-demo"
        mode="horizontal"
      >
        <el-menu-item @click="baohanliebiao(1)" index="1">正在进行中</el-menu-item>
        <el-menu-item @click="companylist" index="2">已完结</el-menu-item>
      </el-menu>
        <el-row class="mb8">
            <el-col :span="19">
                <el-button type="info" @click="shuaxin" icon="el-icon-refresh-right"></el-button>
                <!-- <el-button type="success" @click="handleAdd" icon="el-icon-plus">上传</el-button> -->
            </el-col>
            <el-col :span="5" class="seach">
                <el-input v-model="jigouName" placeholder="请输入工程名称"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="seach"></el-button>
            </el-col>
        </el-row>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" class="table"
         height="100%">
            <!-- <el-table-column align="center" type="selection" width="55"> </el-table-column> -->
            <el-table-column type="index" label="序号" width="50"></el-table-column> 
            <el-table-column align="center" prop="cardname" label="工程编号" show-overflow-tooltip width="120">
            </el-table-column>
            <el-table-column align="center" prop="nickname" label="工程名称" show-overflow-tooltip> </el-table-column>
            <el-table-column align="center" prop="username" label="项目地址" show-overflow-tooltip width="200">
            </el-table-column>
            <!-- 工程资料 ： 多个图片或视频 -->
            <el-table-column align="center" prop="password" label="工程资料">
            </el-table-column>
            <el-table-column align="center" prop="deptname" label="上传人" width="180">
            </el-table-column>
            <el-table-column align="center" prop="deptname" label="上传时间" width="180">
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
                <template slot-scope="scope">
                    <el-button size="mini" @click="detailViews(scope.row)">查看详情</el-button>               
                 </template>
            </el-table-column>
        </el-table>
        <!-- 上传资料 -->
        <el-dialog title="上传资料" :visible.sync="open" width="50%" :close-on-click-modal="false" v-dialogDrag
            custom-class="publicDialog">
            <el-form ref="form" :model="form" label-width="80px" class="">
                <el-form-item label="会议编号 :">
                    <el-input v-model="form.meetingNum"></el-input>
                </el-form-item>
                <el-form-item label="文件名称 :">
                    <el-input v-model="form.fileName"></el-input>
                </el-form-item>
                <el-form-item label="上传人 :">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="上传文件 :">
                    <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList"
                        :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div class="footer">
                <el-button type="" class="btn" @click="save">提交</el-button>
                <el-button type="" class="btn" @click="cancel">取消</el-button>
            </div>
        </el-dialog>

        <div class="block">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30]" :page-size="params.limit" layout="total, sizes, prev, pager, next, jumper"
                :total="total"></el-pagination>
        </div>
    </div>
</template>
  
<script>
import { stafflist, distribution, staffadd, staffdel, staffedit } from "@/api/staff.js";
export default {
    data() {
        return {
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            params: {
                offset: 0,
                limit: 10,
                keywords: "",
                zhuangtai: 0,
                user_id: sessionStorage.getItem("id"),
            },
            total: null,
            // 表单参数
            form: {
                meetingNum: '',
                fileName: '',
                name: '',
                file: '',
            },
            // 表单校验
            rules: {},
            options1: [], //选择部门
            options2: [], //选择职位
            options3: [
                {
                    value: "HTML",
                    label: "HTML",
                },
                {
                    value: "CSS",
                    label: "CSS",
                },
                {
                    value: "JavaScript",
                    label: "JavaScript",
                },
            ], //选择小组
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,
            tableData: [],
            multipleSelection: [],
            activeIndex:'1'
        };
    },
    created() {
       
    },

    methods: {
        shuaxin() {
            this.$router.go(0)
        },
        bumen(value) {
            distribution(value).then((response) => {
                this.options2 = response.data.rows;
                console.log("部门", response.data.rows);
            });
        },
        bumens(value) {
            distribution(value).then((response) => {
                this.options3 = response.data.rows;
                console.log("小组", response.data.rows);
            });
        },
        bumenss(value) {
            (this.form.dept = value.id),
                (this.form.deptname = value.name),
                console.log(this.form);
        },
        distribution() {
            distribution().then((response) => {
                this.options1 = response.data.rows;
                console.log(" 分配审核人员", response.data.rows);
            });
        },
        format(shijianchuo) {
            if (shijianchuo == 0) {
                return ""
            }
            var date = new Date(shijianchuo * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
            var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            return Y + M + D + h + m + s;
        },

        // 表单重置
        reset() {
            this.form = {
                name1: "",
                name2: "",
                name3: "",
                dept: "",
                user_id: "",
                id: "",
                deptname: "",
                username: "",
                nickname: "",
                cardname: "",
                password: "",
                email: "",
                mobile: "",
            };
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        //上传按钮操作
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加员工";
        },

        handlesc(e) {
            console.log(e)
            var bbc = {
                id: e.id,
                user_id: sessionStorage.getItem('user_id')
            }
            this.$confirm('此操作将删除该员工, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                staffdel(bbc).then((response) => {
                    // this.options1 = response.data.rows;
                    console.log("删除员工", response);
                });
                //   this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                //   });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //提交按钮
        onSubmit() {
            if (this.title == "修改员工信息") {
                console.log("修改");
                this.form.user_id = sessionStorage.getItem('user_id')
                staffedit(this.form).then((response) => {

                    // this.options1 = response.data.rows;
                    if (response.code == 1) {
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });

                        this.open = false;
                    }
                    console.log("修改员工", response);
                });
            } else {
                console.log(this.form);
                this.form.user_id = sessionStorage.getItem('user_id')
                staffadd(this.form).then((response) => {
                    // this.options1 = response.data.rows;
                    if (response.code == 1) {
                        this.$message({
                            type: 'success',
                            message: '新增成功!'
                        });
                    }
                    console.log("新增员工", response);
                });

                this.open = false;
            }
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.params.limit = val;
            console.log("yi0", this.params)
            stafflist(this.params).then((response) => {
                console.log("asdas", response)
                var bbc = response.data.rows;
                this.total = response.data.total;
                bbc.forEach((element) => {
                    element.prevtime = this.format(Number(element.prevtime));
                    element.createtime = this.format(Number(element.createtime));
                });
                this.tableData = bbc;
                // console.log(response.data)
            });
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);

            this.params.offset = parseInt(val - 1) * this.params.limit;
            console.log("yi2", this.params)
            stafflist(this.params).then((response) => {
                console.log("asdas", response)
                var bbc = response.data.rows;
                this.total = response.data.total;
                bbc.forEach((element) => {
                    element.prevtime = this.format(Number(element.prevtime));
                    element.createtime = this.format(Number(element.createtime));
                });
                this.tableData = bbc;
                // console.log(response.data)
            });
        },
    },
};
</script>
  
<style scoped lang="scss">
.body {
    height: calc(90vh - 60px);
    display: flex;
    flex-direction: column;
}

.table {
    width: 100%;
    margin-top: 10px;
}

.block {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding-top: 0 !important;
    padding-bottom: 10px;
}
.el-menu--horizontal>.el-menu-item {
  height: 40px;
  line-height: 40px;
}

.el-menu.el-menu--horizontal {
  margin-bottom: 8px;
}
</style>
  